<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 538 282"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><rect fill="#06F" rx="41" height="202.027" width="219.642" y="35.156" x="120.095"/><rect fill="#002F5C" rx="39" height="144.777" width="157.988" y="136.444" x="259.917"/><rect fill="#F3F9FF" rx="7.431" height="14.863" width="115.601" y="155.161" x="276.431"/><rect fill="#F3F9FF" rx="7.431" height="14.863" width="63.305" y="176.63" x="276.431"/><rect fill="#F3F9FF" rx="9" height="20" width="170" y="54.193" x="139.738"/><rect fill="#F3F9FF" rx="9" height="19" width="93" y="99.193" x="139.738"/><rect fill="#F3F9FF" rx="9" height="19" width="93" y="143.193" x="139.738"/><rect fill="#F3F9FF" rx="7.431" height="14.863" width="63.305" y="199.199" x="276.431"/><path fill="#002F5C" d="m150.371 194.928.412 35.719a3.393 3.393 0 0 0 5.612 2.527l8.676-7.533 8.847 15.348a3.39 3.39 0 0 0 4.632 1.243l3.717-2.15a3.4 3.4 0 0 0 1.242-4.639l-8.848-15.348 10.86-3.762a3.397 3.397 0 0 0 .623-6.129l-30.65-18.235a3.388 3.388 0 0 0-4.647 1.186 3.402 3.402 0 0 0-.476 1.773ZM288.997 35.156c.156-11.345 2.125-20.738 7.886-26.34 5.602-5.76 14.995-7.73 26.339-7.886 11.345.156 20.738 2.125 26.34 7.887 5.761 5.601 7.731 14.994 7.886 26.339-.156 11.344-2.126 20.737-7.887 26.34-5.601 5.76-14.994 7.73-26.339 7.885-11.344-.156-20.737-2.125-26.339-7.886-5.761-5.602-7.731-14.995-7.886-26.34Z"/><path fill="#fff" d="m311.559 43.078 5.225-5.224a.934.934 0 0 0 .238-.921 6.356 6.356 0 0 1-.254-1.777 6.462 6.462 0 0 1 6.455-6.455c.616 0 1.212.09 1.777.255.326.095.68.002.92-.24l4.476-4.475a.94.94 0 0 0-.241-1.502c-2.136-1.089-4.478-1.785-6.932-1.785-9.955 0-18.075 11.418-18.075 14.202 0 1.36 1.941 4.78 5.085 7.923a.937.937 0 0 0 1.326-.001Zm23.326-15.844-5.224 5.224a.935.935 0 0 0-.239.92c.164.566.255 1.161.255 1.778a6.462 6.462 0 0 1-6.455 6.455 6.36 6.36 0 0 1-1.777-.255.932.932 0 0 0-.921.239l-4.476 4.475a.94.94 0 0 0 .242 1.503c2.136 1.088 4.478 1.784 6.932 1.784 9.955 0 18.075-11.417 18.075-14.201 0-1.36-1.941-4.78-5.084-7.924a.94.94 0 0 0-1.328.002Z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Frame626651 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
